<template>
  <a-space>
    <a-tooltip>
      <template #title>删除</template>
      <a-button shape="circle"
                v-debounce="{callback: deleteItem ,delay:500}">
        <template #icon>
          <Icon icon="DeleteOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>隐藏</template>
      <a-button shape="circle" v-debounce="{callback: hiddenItem ,delay:500}">
        <template #icon>
          <Icon icon="EyeInvisibleOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>锁定</template>
      <a-button shape="circle" :type="isLocked?'primary':''" v-debounce="{callback: lockItem ,delay:500}">
        <template #icon>
          <Icon icon="LockOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>复制</template>
      <a-button shape="circle" v-debounce="{callback: copyItem ,delay:500}">
        <template #icon>
          <Icon icon="CopyOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>粘贴</template>
      <a-button shape="circle" v-debounce="{callback: pasteItem ,delay:500}" :disabled="!isCopy">
        <template #icon>
          <Icon icon="BlockOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>上移</template>
      <a-button shape="circle" v-debounce="{callback: upItem ,delay:500}" :disabled="isUpDisabled">
        <template #icon>
          <Icon icon="UpOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>下移</template>
      <a-button shape="circle" v-debounce="{callback: downItem ,delay:500}" :disabled="isDownDisabled">
        <template #icon>
          <Icon icon="DownOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>撤销</template>
      <a-button shape="circle" v-debounce="{callback: revoke ,delay:500}" :disabled="isRevokeDisabled">
        <template #icon>
          <Icon icon="UndoOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>重做</template>
      <a-button shape="circle" v-debounce="{callback: redo ,delay:500}" :disabled="isRedoDisabled">
        <template #icon>
          <Icon icon="RedoOutlined"></Icon>
        </template>
      </a-button>
    </a-tooltip>
  </a-space>
</template>

<script setup>
import {Icon} from "../utils/Icon.js";
import useQuestion from "../store/question.js";

const questionStore = useQuestion()
import {storeToRefs} from "pinia";

const {isLocked, isCopy, isUpDisabled, isDownDisabled, componentList, activeId,isRevokeDisabled,isRedoDisabled} = storeToRefs(questionStore)
const deleteItem = () => {
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  let preIdVal = activeId.value
  questionStore.deleteItem()
  questionStore.addSnapshots({
    type: 'delete',
    data: preVal,
    activeId: preIdVal
  })
}
const revoke = () => {
  questionStore.revoke()
}
const redo = () => {
  questionStore.redo()
}
const lockItem = () => {
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.lockItem()
  questionStore.addSnapshots({
    type: 'lock',
    data: preVal
  })
}
const hiddenItem = () => {
  let preIdVal = activeId.value
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.hiddenItem(true)
  questionStore.addSnapshots({
    type: 'hidden',
    data: preVal,
    activeId: preIdVal
  })
}
const copyItem = () => {
  questionStore.copyItem()
}
const pasteItem = () => {
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.pasteItem()
  questionStore.addSnapshots({
    type: 'paste',
    data: preVal
  })
}
const upItem = () => {
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.upItem()
  questionStore.addSnapshots({
    type: 'up',
    data: preVal
  })
}
const downItem = () => {
  let preVal = JSON.parse(JSON.stringify(componentList.value))
  questionStore.downItem()
  questionStore.addSnapshots({
    type: 'down',
    data: preVal
  })
}
</script>

<style scoped>

</style>
